<template>
  <div class="footer">
    <div class="footer-big">
      <div class="container">
        <div class="info-footer">
          <div class="logo-info">
            <img src="@/assets/logo.png" class="logo" />
            <span>XBoot</span>
            <span class="blue">物料中心</span>
          </div>
          <p class="text">
            XBoot is an excellent one-station front-end and back-end separation
            fast development platform.
          </p>
          <div class="text">
            <Icon
              type="ios-mail-outline"
              color="#fff"
              size="20"
              style="margin-right: 8px"
            />Email: exrick@exrick.cn
          </div>
        </div>
        <div class="footer-menu">
          <h4 class="footer-widget-title">产品</h4>
          <a href="https://github.com/Exrick/xboot" target="_blank">XBoot开源版</a>
          <a href="http://xpay.exrick.cn/pay?xboot" target="_blank">完整版</a>
          <a href="http://wpa.qq.com/msgrd?v=3&uin=1012139570&site=qq&menu=yes" target="_blank">商用授权</a>
          <a href="https://www.kancloud.cn/exrick/xboot/content" target="_blank">开发文档</a>
          <a href="https://www.kancloud.cn/exrick/xboot/1148941" target="_blank">更新日志</a>
        </div>
        <div class="footer-menu">
          <h4 class="footer-widget-title text--white">帮助</h4>
          <a href="https://github.com/Exrick/x-boot/issues" target="_blank">FAQ</a>
          <a href="http://wpa.qq.com/msgrd?v=3&uin=1012139570&site=qq&menu=yes" target="_blank">联系作者</a>
        </div>
        <div class="footer-menu">
          <h4 class="footer-widget-title text--white">生态系统</h4>
          <a href="http://xb.exrick.cn" target="_blank">XBoot开发平台</a>
          <a href="http://xmall.exrick.cn" target="_blank">XMall商城</a>
          <a href="http://xpay.exrick.cn" target="_blank">XPay支付系统</a>
          <a href="http://xpay.exrick.cn/pay?xboot" target="_blank">本站源码</a>
        </div>
      </div>
    </div>
    <div class="mini-footer">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="copyright-text">
              <p>
                © 2021 - Present <a href="http://exrick.cn" target="_blank">Exrick</a>. All
                rights reserved.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <BackTop :height="1000" :bottom="20"></BackTop>
  </div>
</template>

<script>
export default {
  name: "header",
  data() {
    return {};
  },
  methods: {},
  mounted() {},
};
</script>

<style scoped lang="less">
.footer {
  .footer-big {
    background: #262b30;
    padding-top: 120px;
    padding-bottom: 120px;
    display: flex;
    justify-content: center;
    .container {
      width: 1140px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      .info-footer {
        width: 255px;
        .logo-info {
          font-weight: 500;
          color: #fff;
          display: flex;
          align-items: center;
          font-size: 20px;
          cursor: pointer;
          margin-bottom: 25px;
          .logo {
            width: 50px;
            margin-right: 10px;
          }
          .blue {
            color: #0674ec;
            margin-left: 3px;
          }
        }
        .text {
          color: #ababab;
          font-size: 16px;
          line-height: 26px;
          font-weight: 400;
          margin-bottom: 16px;
        }
      }
      .footer-menu {
        width: 218px;
        .footer-widget-title {
          line-height: 42px;
          margin-bottom: 10px;
          color: #fff;
          font-size: 22px;
          font-weight: 400;
        }
        a {
          display: block;
          font-size: 15px;
          line-height: 32px;
          transition: 0.3s ease;
          color: #ababab;
          &:hover {
            color: #fff;
          }
        }
      }
    }
  }
  .mini-footer {
    background: #192027;
    text-align: center;
    padding: 32px 0;
  }
}
</style>
